<script setup lang="ts">
import PanelGroup from './components/PanelGroup.vue'
import { ElRow, ElCol, ElCard, ElSkeleton } from 'element-plus'
import { Echart } from '@/components/Echart'
import { pieOptions, barOptions, lineOptions } from '../echarts-data'
import { ref, reactive } from 'vue'
import { getCourseGuankan } from '@/api/course'
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { useI18n } from '@/hooks/web/useI18n'

//t代表国际化
const { t } = useI18n()
//这个如果为true加载的时候会转圈
const loading = ref(true)

const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
barOptionsData.title = {
  text: '播放量统计',
  left: 'center'
}

// 周活跃量
const getDianzan = async () => {
  const res = await getCourseGuankan().catch(() => {})
  if (res) {
    ClassName.value = res.data;
    set(
            barOptionsData,
            'xAxis.data',
            res.data.map((v) => t(v.courseClassName))
    )
    set(barOptionsData, 'series', [
      {
        name: t('analysis.activeQuantity'),
        data: res.data.map((v) => v.lookNum),
        type: 'bar',
      }
    ])
  }
}

let ClassName = ref<object>();

const getAllApi = async () => {
  await Promise.all([getDianzan()])
  loading.value = false
}

getAllApi()
</script>

<template>
  <PanelGroup />
  <div style="width: 2000px;">
    <div style="width: 120px;float: left;height: 82px;">
      <div class="leixing" style="border-top: 1px solid #E7E7E7;border-left: 1px solid #E7E7E7;border-bottom: 1px solid #E7E7E7">课程类型</div>
      <div class="leixing" style="background-color: #F1F1F1;border-left: 1px solid #E7E7E7">播放次数</div>
    </div>
    <div style="float: left">
      <table border="1" class="tab">
        <tr v-for="a in ClassName" class="tab_tr">
          <td class="coursename">{{a.courseClassName}}</td>
          <td class="look">{{a.lookNum}}</td>
        </tr>
      </table>
    </div>
  </div>
  <div style="clear: both"></div>
  <div class="zt2">
  </div>
  <ElRow :gutter="20" justify="space-between">
    <ElCol :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
      <ElCard shadow="hover" class="mb-20px">
        <ElSkeleton :loading="loading" animated>
          <Echart :options="barOptionsData" :height="500"/>
        </ElSkeleton>
      </ElCard>
    </ElCol>
  </ElRow>
</template>

<style lang="less" scoped>
  .leixing{
    height: 41px;
    text-align: center;
    line-height: 41px;
  }
  .kecheng{
    display: inline-block;
    padding: 10px;
    border: 1px solid #E7E7E7;
  }
  .coursename{
    display: block;
    line-height: 40px;
    padding: 0px 25px 0px 25px;
    text-align: center;
  }
  .look{
    display: block;
    line-height: 40px;
    padding: 0px 25px 0px 25px;
    text-align: center;
    background-color: #F1F1F1;
  }
  .tab{
    width:100%;
  }
  .tab_tr{
    height:80px;
    background-color:#F9FAFC;
    display: inline-block;
    border: 1px solid #E7E7E7;
    margin-bottom: 10px;
  }
  .zt{
    background-color: white;
    height: 50px;
    font:18px/50px "微软雅黑";
    font-weight: bold;
    padding-left: 40px;
    border: 1px solid #E6E6E6;
  }
  .zt2{
    background-color: white;
    height: 50px;
    font:18px/65px "微软雅黑";
    padding-left: 40px;
    margin-bottom: 20px;
  }
</style>
